<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body class="running">
		<!-- 头部 -->
		<div class="header">
			<p>户外跑</p>
			<h3>运动中</h3>
		</div>
		<!-- 公里数 -->
		<div class="km"><span id="kmnum"> 00.00</span>公里</div>
		<!-- gps信号 -->
		<div class="gps">
			<span>GPS信号弱数据精准度低</span>
			<i class="iconfont icon-location"></i>
		</div>
		<!-- 计数器 -->
		<div class="panel">
			<!-- 配速 -->
			<div>
				<i class="iconfont icon-speedometer"></i>
				配速
				<p class="speed">12米/秒</p>
			</div>
			<!-- 用时 -->
			<div>
				<i class="iconfont icon-time1"></i>
				配速
				<p class="duration">00:00:00</p>
			</div>
			<!-- 千卡 -->
			<div>
				<i class="iconfont icon-fire"></i>
				配速
				<p class="calorie">1.88</p>
			</div>
		</div>
		<!-- 底部按钮 -->
		<div class="btnbox">
			<!-- 继续按钮 -->
			<div class="continuebtn">
				<i class="iconfont icon-continue"></i>
				<p>继续</p>
			</div>
			<!-- 暂停按钮 -->
			<div class="pausebtn">
				<i class="iconfont icon-pause2"></i>
				<p>继续</p>
			</div>
			<!-- 结束按钮 -->
			<div class="finishbtn">
				<i class="iconfont icon-finish"></i>
				<p>结束</p>
			</div>
		</div>
	</body>
</html>
